import React, { useRef, useState } from 'react';
import { Upload, FileText, X } from 'lucide-react';

interface FileUploadProps {
  onFileSelect: (file: File) => void;
  fileName: string | null;
  isLoading: boolean;
}

const FileUpload: React.FC<FileUploadProps> = ({ onFileSelect, fileName, isLoading }) => {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [dragActive, setDragActive] = useState(false);

  const handleDrag = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    if (e.type === 'dragenter' || e.type === 'dragover') {
      setDragActive(true);
    } else if (e.type === 'dragleave') {
      setDragActive(false);
    }
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);
    
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      onFileSelect(e.dataTransfer.files[0]);
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    if (e.target.files && e.target.files[0]) {
      onFileSelect(e.target.files[0]);
    }
  };

  const handleClick = () => {
    fileInputRef.current?.click();
  };

  const handleClearFile = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
    onFileSelect(null as any);
  };

  return (
    <div className="w-full">
      <input
        ref={fileInputRef}
        type="file"
        accept=".csv,.xlsx,.xls"
        onChange={handleChange}
        className="hidden"
        disabled={isLoading}
      />
      
      <div
        className={`border-2 border-dashed rounded-lg p-6 transition-colors text-center
          ${dragActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-400'}
          ${isLoading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
        onClick={isLoading ? undefined : handleClick}
        onDragEnter={handleDrag}
        onDragLeave={handleDrag}
        onDragOver={handleDrag}
        onDrop={handleDrop}
      >
        {fileName ? (
          <div className="flex items-center justify-center gap-3">
            <FileText className="text-blue-600" size={24} />
            <span className="font-medium text-gray-800">{fileName}</span>
            {!isLoading && (
              <button 
                onClick={handleClearFile}
                className="p-1 rounded-full hover:bg-gray-200 text-gray-500"
              >
                <X size={16} />
              </button>
            )}
          </div>
        ) : (
          <div className="space-y-3">
            <Upload className="mx-auto text-blue-600" size={32} />
            <div className="space-y-1">
              <p className="font-medium text-gray-800">
                Click to upload or drag and drop
              </p>
              <p className="text-sm text-gray-500">
                Supports CSV, XLS, and XLSX files
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default FileUpload;